<template>
	<div class="container">
		<el-page-header @back="goBack" content="站点回收-线下支出"></el-page-header>
		<div class="e-m-t-45">
			<div class="flex" style="justify-content: flex-end;">
				<el-form :inline="true" class="nav-bar-form">
					<!-- <el-form-item label="负责小哥">
									<el-select v-model="broid" filterable placeholder="请选择">
										<el-option v-for="item in broList" :key="item.id" :label="item.name"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item> -->
					<!-- <el-form-item label="打包站">
						<el-select v-model="packstationid" filterable placeholder="请选择">
							<el-option v-for="item in packstationlist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item> -->
					<el-form-item label="站点">
						<el-select v-model="storeid" filterable placeholder="请选择">
							<el-option v-for="item in storelist" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-input placeholder="关键词搜索" v-model="key" clearable prefix-icon="el-icon-search"
							@clear="getList"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="getList">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<el-table :data="tableData" style="width: 100%" stripe>
			<el-table-column fixed prop="number" label="订单号" width="200">
			</el-table-column>
			<el-table-column prop="staff.name" label="操作店员">
			</el-table-column>
			<el-table-column prop="amount" label="金额（元）" width="180">
			</el-table-column>
			<el-table-column prop="store.name" label="关联站点" width="180">
			</el-table-column>
			<el-table-column prop="payway" label="支付方式" width="180">
			</el-table-column>
			<el-table-column prop="createddatetime" label="创建时间" width="180">
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="200">
				<template slot-scope="scope">
					<el-button @click="views(scope.row.id)" type="text" size="small">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-pagination">
			<el-pagination background layout="sizes, total, prev, pager, next" :total="total"
				:page-sizes="[10, 50, 100, 200]" :page-size="pageSize" :current-page="page" @current-change="pageChange"
				@size-change="handleSizeChange">
			</el-pagination>
		</div>
		<el-dialog title="核算" :visible.sync="dialogVisible" width="500px">
			<el-form ref="form" :model="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="账号类型" prop="payway">
					<el-select v-model="form.accountid" placeholder="请选择">
						<el-option v-for="item in paywayList" :key="item.id" :label="item.accountnumber"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="流水账号" prop="flowaccount">
					<el-input v-model="form.flowaccount" placeholder="请填写流水账号"></el-input>
				</el-form-item>
				<el-form-item label="金额" prop="incomeamount">
					<el-input v-model="form.incomeamount" placeholder="请填写金额"></el-input>
				</el-form-item>
				<el-form-item label="到账日期" prop="date">
					<el-date-picker v-model="form.date" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
						placeholder="选择到账日期">

					</el-date-picker>
				</el-form-item>
				<el-form-item label="上传资料">
					<cropper-upload :zoomScale='[1, 1]' :isCropper="false" @getUpload="handleFilesSuccess"
						class="avatar-uploader">
						<img v-if="form.picvoucher" :src="fileURL + form.picvoucher" class="avatar">
						<div class="avatar-uploader-icon" v-else>
							<div><i class="el-icon-plus"></i></div>
							<div class="e-font-14">上传图片</div>
						</div>
					</cropper-upload>
					<!-- <div class="tips e-p-t-10">建议上传尺寸比例为600*600 </div> -->
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="examineSubmit">确定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="详情" :visible.sync="dialogVisible1" width="50%" v-if="viewdata">
			<el-descriptions title="" direction="vertical" :column="4" border>
				<el-descriptions-item label="订单号">{{ viewdata.number }}</el-descriptions-item>
				<el-descriptions-item label="店员">{{ viewdata.staff.name }}</el-descriptions-item>
				<el-descriptions-item label="关联站点">{{ viewdata.staff.name }}</el-descriptions-item>
				<el-descriptions-item label="下单时间">
					{{ viewdata.createddatetime }}
				</el-descriptions-item>
				<el-descriptions-item label="数据">
					<template>
						<!-- <el-table :data="viewdata.details" style="width: 100%">
							<el-table-column prop="typenames" label="类型" width="180">
							</el-table-column>
							<el-table-column prop="price" label="单价（元/KG）" width="180">
							</el-table-column>
							<el-table-column prop="weight" label="重量（kg）">
							</el-table-column>
							<el-table-column prop="amount" label="金额（元）">
							</el-table-column>
						</el-table> -->

						<el-table border :span-method="objectSpanMethod" :data="retrievetableData" show-summary style="width: 100%">
                            <el-table-column prop="large" label="类型">
                            </el-table-column>
                            <el-table-column prop="typenames" label="可回收物">
                            </el-table-column>
                            <el-table-column prop="weight" width="180" label="数量">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.weight }}{{ scope.row.isweighing?'KG':'件' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="price" width="180" label="回收单价">
                                <template slot-scope="scope">
                                    <span>{{ scope.row.price }}{{ scope.row.isweighing?'元/KG':'元/件' }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="amount" width="180" label="总回收价（元）">
                            </el-table-column>
                        </el-table>
					</template>
				</el-descriptions-item>
			</el-descriptions>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible1 = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	layout: 'admin',
	head() {
		return {
			title: '出库核算列表' 
		}
	},
	data() {
		return {

			dialogVisible1: false,
			broList: [],//小哥数组
			broid: 0,//小哥id
			packstationlist: [],//打包站数组
			packstationid: 0,//打包站id
			storelist: [],//站点数组
			storeid: 0,//站点id
			options: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶'
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
			value: '',
			key: '',
			page: 1,
			pageSize: 10,
			status: 1,
			statusArr: [
				{
					name: '出库核算列表',
					value: 1
				},
				{
					name: '提现申请流水',
					value: 2
				}
			],
			loading: false,
			total: 0,
			dialogVisible: false,
			dialogType: 'add',
			form: {
				id: '',
				accountid: '',  // 账户类型id
				picvoucher: '', // 资料图片
				incomeamount: null, // 金额
				flowaccount: '',
				data: ''
			},
			rules: {

			},
			tableData: [],
			paywayList: [],
			viewdata: '',
			retrievetableData: [],
		}
	},
	watch: {
		dialogVisible(value) {
			if (!value) {
				this.form = {
					id: '',
					accountid: '',  // 账户类型id
					incomeamount: 0, // 金额
					picvoucher: '', // 资料图片
					flowaccount: ''
				}
			}
		},
		status(value) {
			if (value == 1) {
				this.$router.push({
					path: '/finance/list'
				})
			} else {
				this.$router.push({
					path: '/finance/withdrawList'
				})
			}
		}
	},
	mounted() {
		this.getList()
		this.getpaywayList()
		// this.getbroList()
		this.getstorelist()
		this.getpackstationlist()
	},
	methods: {
		getbroList() {
			this.$axios.post('/Select/BrotherList', {
				"pageIndex": 1,
				"pageSize": 999,
				"offset": 0,
				"key": "",
				"order": [
					{
						"column": "string",
						"isDesc": true
					}
				]
			}).then(res => {
				console.log(res)
				this.broList = res.rows
				this.broList.unshift({
					"id": 0,
					"name": '全部'
				})
			})
		},
		//大
		getpackstationlist() {
			this.$axios.post('/Select/packstationlist', {
				"pageIndex": 1,
				"pageSize": 999,
				"offset": 0,
				"key": "",
				"order": [
					{
						"column": "string",
						"isDesc": true
					}
				]
			}).then(res => {
				console.log(res)
				this.packstationlist = res.rows
				this.packstationlist.unshift({
					"id": 0,
					"name": '全部'
				})
			})
		},
		//中
		getstorelist() {
			this.$axios.post('/Select/storelist', {
				"pageIndex": 1,
				"pageSize": 999,
				"offset": 0,
				"key": "",
				"all": true
				// 	{
				// 		"column": "string",
				// 		"isDesc": true
				// 	}
				// ]
			}).then(res => {
				console.log(res)
				this.storelist = res.rows
				this.storelist.unshift({
					"id": 0,
					"name": '全部'
				})
			})
		},
		goBack() {
			this.$router.go(-1)
		},
		handleFilesSuccess(res, file) {
			if (file.status === "success") {
				this.loading = false
				this.form.picvoucher = res.path
			}
		},
		getpaywayList() {
			this.$axios.post('/Operator/Account/List', {
				"PageIndex": 1,
				"PageSize": 999,
			}).then((res) => {
				this.paywayList = res.rows
			})
		},
		getList() {
			this.loading = true
			this.$axios.post('/Admin/store/fitorder/List', {
				"PageIndex": this.page,
				"PageSize": this.pageSize,
				"Key": this.key,
				"storeId": this.storeid,
				// "brotherId": this.broid,
				// "puckId": this.packstationid
			}).then((res) => {
				console.log(res)
				this.tableData = res.rows;
				this.total = res.total;
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
		},
		views(id) {
			this.retrievetableData = []
			this.dialogVisible1 = true
			this.$axios.get(`/Admin/Store/FITOrder/Details?Id=${id}`).then(res => {
				console.log(res)
				let viewdata = res

				viewdata.details.forEach((item, index) => {
					item.details.forEach((i, x) => {
						let obj = {}
						obj.amount = i.amount
						obj.price = i.price
						obj.typenames = i.productname
						obj.typepath = i.typepath
						obj.typeremarks = i.typeremarks
						obj.weight = i.weight
						obj.large = item.names
						obj.bigid = item.id
						obj.isweighing = item.isweighing
						this.retrievetableData.push(obj)
					})
				})
				this.viewdata = viewdata
			})
		},
		//合并单元格
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            let mergeLength = 1;//需要进行横纵合并的列
            if (columnIndex < mergeLength) {
                let finArray = [1, 1];
                // 处理行数据
                console.log(Object.keys(row))
                let cgname = Object.keys(row)[7]//7是数字最后一项类型id
                if (rowIndex === 0 || row[cgname] !== this.retrievetableData[rowIndex - 1][cgname]) {
                    let rowspan = 1;
                    //计算需要进行合并操作的行
                    for (let i = 0; i < this.retrievetableData.length - 1; i++) {
                        // 只合并连续的
                        if (this.retrievetableData[i][cgname] === row[cgname] && this.retrievetableData[i + 1][cgname] === row[cgname]) {
                            rowspan++;
                        }
                    }
                    finArray[0] = rowspan;
                } else {
                    finArray[0] = 0;
                }
                return finArray
            }
        },
		search() {
			this.getList()
		},
		pageChange(e) { // 页码切换事件
			this.page = e;
			this.getList()
		},
		handleSizeChange(val) {
			this.page = 1;
			this.pageSize = val;
			this.getList()
		},
		examine(id) {
			this.dialogVisible = true
			this.form.id = id
		},
		examineSubmit() {
			this.$confirm('是否确认要核算此数据?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$axios.post('/Admin/Finance/Examine', this.form).then((res) => {
					this.$message.success(res.msg);
					this.dialogVisible = false
					this.getList()
				})
			})
		}
	}
}
</script>

<style lang="scss">
.text-right {}

.nav-bar {
	padding: 45px 0 0;
}

.send {
	margin-top: 15px;
	margin-right: 10px;
}

.dialogForm {
	display: flex;
	flex-wrap: wrap;

	.el-form-item {
		width: 50%;
		float: left;

		&.all {
			width: 100%;
		}

		.el-select {
			width: 100%;
		}
	}
}
</style>
